<template>
  <div class="mine" v-if="loaded">
    <div class="titleBar">
      <div class="backIcon" @click="backToApp">
        <svg t="1593162984672" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1917" ><path d="M663.466667 889.6l-362.666667-362.666667c-8.533333-8.533333-8.533333-21.333333 0-29.866666l362.666667-362.666667c8.533333-8.533333 21.333333-8.533333 29.866666 0l29.866667 29.866667c8.533333 8.533333 8.533333 21.333333 0 29.866666L422.4 497.066667c-8.533333 8.533333-8.533333 21.333333 0 29.866666l300.8 300.8c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 10.666667-21.333333 10.666667-29.866666 2.133333z" fill="#000000" p-id="1918"></path></svg>
      </div>
      <div class="title">
        我的颜值
      </div>
      <div class="rightOption" @click="goToAPPPage">
        兑换记录
      </div>
    </div>
    <div class="Wrap" ref="indexScroll">
      <div class="scrollWrap">
        <div class="user">
          <div class="userInfo">
            <div class="userPhoto" :style="{background: 'url(' + avatar + ') no-repeat', backgroundSize: 'cover', backgroundPosition: 'center'}">
              <!-- <img :src="avatar" alt=""> -->
            </div>
            <div class="userYanZhi">
              <p>当前颜值</p>
              <i>{{yanzhi}}</i>
            </div>
          </div>
          <div class="getYanZhi" @click="goSignin">
            <span>赚颜值</span>
            <svg t="1592815863417" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2609" width="220" height="220"><path d="M792.412504 511.827061l-48.762587-48.793286-0.208754 0.206708L280.350083 0.11154l-48.762587 48.762587 463.096197 463.125873L231.587496 975.129966l48.762587 48.75747 463.09108-463.124849 0.208754 0.206708 48.762587-48.798403-0.172939-0.171915L792.412504 511.827061zM792.412504 511.827061" p-id="2610"></path></svg>
          </div>
        </div>
        <div class="_template" v-if="limit.thumb">
          <div class="templateTitle">
            每周限时兑换
          </div>
          <div class="templateContent">
            <div @click="goToGoodsDetail(limit, 'limit')" class="imgWrap imgWrap_big">
              <img :src="limit && limit.thumb" alt="">
            </div>
          </div>
        </div>
        <div class="_template" v-if="goodsList.length">
          <div class="templateTitle">
            精选兑换商品
          </div>
          <div class="templateContent">
            <div class="goodsList">
              <div @click="goToGoodsDetail(n)" v-for="n in goodsList" :key="n.id" class="goods">
                <div class="imgWrap imgWrap_middle">
                  <img :src="n.thumb" alt="">
                </div>
                <div class="goodsDetail">
                  <div class="goodsName">
                    {{n.title}}
                  </div>
                  <div class="price">
                    {{n.price}}颜值
                  </div>
                  <div class="hadCount">
                    已兑{{n.total}}件
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getQueryVariable} from '@/utils/utils'
import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down'

BScroll.use(PullUp)
BScroll.use(PullDown)
export default {
  name: 'mine',
  data() {
    return {
      loaded: false,
      page: 1,
      offset: 10,
      yanzhi: 0,
      avatar: '',
      limit: {},
      goodsList: [],
      scroll: null,
      requestRunning: false,
      noMore: false,
      token: ''
    };
  },
  activated () {
    console.log(1)
  },
  async mounted () {
    this.token = getQueryVariable('token')
    sessionStorage.setItem('token', this.token)
    await this.getUserInfo()
    await this.getGoodsList()
    this.loaded = true
    this.$nextTick(() => {
      this.BScrollInit()
    })
  },
  methods: {
    backToApp () {
      window.WebViewJavascriptBridge.callHandler('goback',{},function() {})
    },
    goSignin () {
      window.WebViewJavascriptBridge.callHandler('goSignin',{},function() {})
    },
    goToAPPPage () {
      this.$router.push({path: '/YanZhiDetail'})
    },
    goToGoodsDetail (n, type) {
      this.$router.push({path: '/YanZhiGoodsDetail', query: {id: n.id, limit: type === 'limit'}})
    },
    photoHttp2Https (url) {
      if (url && url.length) {
        let reg = /(http):\/\/S*/gi
        if (url.match(reg)) {
          return url.replace(reg, 'https://')
        } else {
          return url
        }
      } else {
        return ''
      }
    },
    async getUserInfo () {
      await this.$axios
      .get("https://kotest.bojem.com/user/info", {
        params: {
          token: this.token
        }
      })
      .then(res => {
        console.log(res)
        if (res.status === 200) {
          if (res.data.code === '0000') {
            console.log(res.data.data)
            let data = res.data.data
            this.yanzhi = data.yanzhi
            this.avatar = this.photoHttp2Https(data.avatar)
          } else {
            if (res.data.msg) {
              throw new Error(res.data.msg)
            } else {
              throw new Error('请求异常')
            }
          }
        } else {
          throw new Error('网络错误')
        }
      })
      .catch((error) => {
        this.$toastMessage({message: error.message})
      });
    },
    async getGoodsList (callback) {
      this.requestRunning = true
      await this.$axios
      .get("https://kotest.bojem.com/user/goodsList", {
        params: {
          start: (this.page - 1) * this.offset,
          offset: this.offset,
          token: this.token
        }
      })
      .then(res => {
        this.requestRunning = false
        console.log(res)
        if (res.status === 200) {
          if (res.data.code === '0000') {
            console.log(res.data.data)
            let data = res.data.data
            this.limit = data.limit
            if (data.data.length === 0) {
              if (this.goodsList.length === 0) {
                // 没有数据
              } else {
                // 没有更多数据
                this.noMore = true
              }
            } else if (data.data.length < this.offset) {
              // 没有更多数据
              this.noMore = true
            }
            if (callback) {
              callback()
            }
            this.goodsList = this.goodsList.concat(res.data.data.data)
            if (this.scroll) {
              console.log(this.scroll)
              setTimeout(() => {
                this.scroll.finishPullUp()
                this.scroll.refresh()
              }, 300)
            }
          } else {
            if (res.data.msg) {
              throw new Error(res.data.msg)
            } else {
              throw new Error('请求异常')
            }
          }
        } else {
          throw new Error('网络错误')
        }
      })
      .catch((error) => {
        this.requestRunning = false
        this.$toastMessage({message: error.message})
      });
    },
    BScrollInit () {
      this.scroll = new BScroll(this.$refs.indexScroll, {
        scrollY: true,
        scrollX: false,
        click: true,
        probeType: 3,
        pullUpLoad: true
      })
      this.scroll.on('pullingUp', () => {
        console.log(1)
        if (!this.noMore) {
          if (!this.requestRunning) {
            this.page ++
            this.getGoodsList()
          }
        } else {
          this.noMore = true
        }
      })
    }
  }
};
</script>
<style lang="stylus" scoped>
  p{
    margin 0
  }
  .titleBar{
    height 0.9rem
    background #ffffff
    border-bottom 1px solid #F5F5F5
    padding 0 0.3rem 0
    margin-top 44px
    margin-top  constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
    margin-top: env(safe-area-inset-top);
    display flex
    justify-content space-between
    align-items center
    position relative

    .backIcon{
      position absolute
      left 0.3rem
      top 50%
      transform translateY(-50%)
      width 0.5rem
      z-index 2
      display flex
      svg{
        width 0.5rem
        height 0.4rem
      }
    }
    .title{
      flex 1
      text-align center
      font-size 0.36rem
      color #000
      user-select:none;
    }
    .rightOption{
      position absolute
      right 0.3rem
      top 50%
      transform translateY(-50%)
      font-size 0.26rem;
      color #999999
    }
  }
  .mine
    width 100%
    height calc(100vh - 44px)
    height calc(100vh - constant(safe-area-inset-top))
    height calc(100vh - env(safe-area-inset-top))
    padding-top  constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
    padding-top: env(safe-area-inset-top);
    .Wrap
      height 100vh
      overflow hidden
      .scrollWrap
        background #fff
        .user
          display flex
          justify-content space-between
          align-items center
          height 1.72rem
          background: -moz-linear-gradient(left, #A72B4A 0%, #7B2C3F 100%)
          background: -webkit-gradient(linear, left left, left right, color-stop(0%,#A72B4A), color-stop(100%,#7B2C3F))
          background: -webkit-linear-gradient(left, #A72B4A 0%, #7B2C3F 100%)
          background: -o-linear-gradient(left, #A72B4A 0%, #7B2C3F 100%)
          background: -ms-linear-gradient(left, #A72B4A 0%, #7B2C3F 100%)
          background: linear-gradient(to right, #A72B4A 0%, #7B2C3F 100%)

          .userInfo
            display flex
            justify-content center
            .userPhoto
              width 1rem
              height 1rem
              border-radius: 50%
              overflow hidden
              margin 0 0.2rem 0 0.3rem

            
            .userYanZhi
              display flex
              flex-direction column
              justify-content center
              p 
                font-size 0.24rem
                color rgba(255, 255, 255, 0.7)
                margin-bottom 0.1rem
              i 
                font-size 0.4rem
                color: #fff
                font-style normal
          .getYanZhi
            background rgba(255, 255, 255, 0.1)
            height 0.6rem
            border-radius 0.3rem 0 0 0.3rem
            padding-left 0.35rem
            padding-right 0.3rem
            display flex
            align-items center
            span{
              font-size 0.28rem
              color #ffffff
              padding-top 0.04rem
            }
            svg 
              width 0.24rem
              height 100%
              fill: #fff
              margin-left 0.1rem

        ._template
          padding 0.36rem 0.3rem 0

          .templateTitle
            font-size 0.34rem
            color: #000
            font-weight bloder
          .templateContent
            margin 0.2rem auto 0
            .imgWrap_big
              width 6.9rem
              height 2.5rem
              border-radius 0.1rem
              overflow hidden
              img 
                width 100%
                height 100%
            .imgWrap_middle
              width 3.36rem
              height 3.36rem
              border-radius 0.1rem
              overflow hidden
              img 
                width 100%
                height 100%
            .goodsList
              display flex
              justify-content space-between
              flex-wrap wrap
              .goods
                width 3.36rem
                height 5.3rem
                box-shadow:0px 0px 16px rgba(153,153,153,0.16);
                margin-bottom 0.18rem
                border-radius 0.1rem
                .imgWrap
                  background #f5f4f4
                  border-radius 0.1rem
                  overflow hidden
                .goodsDetail
                  padding 0.26rem 0.2rem 0
                .goodsName
                  font-size 0.3rem
                  color #383838
                  font-weight blod
                  white-space nowrap
                  overflow hidden
                  text-overflow ellipsis
                .price
                  font-size 0.26rem
                  color #7B2C3F
                  margin 0.26rem 0 0.18rem
                .hadCount
                  font-size 0.22rem
                  color #999999
        ._template:last-child
          padding 0.36rem 0.3rem 3rem
          padding 0.36rem 0.3rem calc(3rem + env(safe-area-inset-bottom))
          padding 0.36rem 0.3rem calc(3rem + constant(safe-area-inset-bottom))
</style>
